<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/facePrint.js"></script>
    <script src="data/symbols.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<style>
    .chart {
        position: relative;
        height: 500px;
        max-width: 1000px;
        margin: 0 auto;
    }

    h2 {
        text-align: center;
        font-size: 16px;
        line-height: 30px;
        font-weight: normal;
        background: #dde;
    }
</style>

<h2>vertical | no clip | symbol w/h ratio and margin '40%!'</h2>
<div class="chart" id="main1"></div>
<h2>vertical | no clip | symbol w/h ratio and margin '40%' (notice 0 value)</h2>
<div class="chart" id="main1.x"></div>
<h2>vertical | clip | fixed repeatTimes</h2>
<div class="chart" id="main1.1"></div>
<h2>dataURI | symbolSize responsive (<strong>TRY RESIZE</strong>)</h2>
<div class="chart" id="symbolSize"></div>
<h2>horizontal | clip | positive | rotate</h2>
<div class="chart" id="main2"></div>
<h2>horizontal | clip | negative and positive symbolBoundingData | no animation</h2>
<div class="chart" id="main3"></div>
<h2>negative symbolMargin | symbolPosition (check whether overflow)</h2>
<div class="chart" id="main4"></div>
<h2>repeat strategy | dynamic data | axisPointer.type 'none' label show</h2>
<div class="chart" id="dynamic-data"></div>

<script>

    function makeChart(id, option, cb) {
        require([
            'echarts'
            // 'echarts/chart/pictorialBar',
            // 'echarts/chart/bar',
            // 'echarts/chart/scatter',
            // 'echarts/component/grid',
            // 'echarts/component/markLine',
            // 'echarts/component/legend',
            // 'echarts/component/tooltip',
            // 'echarts/component/dataZoom'
        ], function (echarts) {
            var main = document.getElementById(id);
            if (main) {
                var chartMain = document.createElement('div');
                chartMain.style.cssText = 'height:100%';
                main.appendChild(chartMain);
                var chart = echarts.init(chartMain);
                chart.setOption(option);

                window.addEventListener('resize', chart.resize);

                cb && cb(echarts, chart);
            }

        });
    }

</script>


<script>
    makeChart('main1', {
        legend: {
            data: ['data', 'data2', 'bg', 'original bar', 'original bg'],
            selected: {
                'original bar': false,
                'original bg': false
            }
        },
        tooltip: {},
        yAxis: {
            data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
            axisTick: {show: false}
        },
        xAxis: {
            splitLine: {show: false}
        },
        // animationDuration: 2000,
        // animationDurationUpdate: 2000,
        series: [{
            name: 'data',
            type: 'pictorialBar',
            cursor: 'move',
            label: {
                normal: {
                    show: true,
                    position: 'outside',
                    offset: [40, 0]
                }
            },
            symbol: pathSymbols.plane,
            symbolRepeat: true,
            symbolMargin: '40%!',
            symbolSize: ['100%', '80%'],
            z: 10,
            data: [12, 60, 54, '-', 23, -16, 0, 25]
        }, {
            name: 'data2',
            type: 'pictorialBar',
            symbol: pathSymbols.plane,
            barGap: '20%',
            symbolRepeat: true,
            symbolMargin: '40%!',
            symbolSize: ['100%', '80%'],
            z: 10,
            data: [33, 1, 41, -18, 23, -56, 0, 15]
        }, {
            name: 'original bar',
            type: 'bar',
            color: ['rgba(0,0,0,0.5)'],
            data: [12, 60, 54, '-', 23, -16, 0, 25]
        }, {
            name: 'original bg',
            type: 'bar',
            color: ['rgba(0,0,0,0.5)'],
            data: [60, 60, 60, '-', 60, -30, 60, 60]
        }]
    });
</script>


<script>
    makeChart('main1.x', {
        legend: {
            data: ['data', 'data2', 'bg', 'original bar', 'original bg'],
            selected: {
                'original bar': false,
                'original bg': false
            }
        },
        tooltip: {},
        yAxis: {
            data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
            axisTick: {show: false}
        },
        xAxis: {
            splitLine: {show: false}
        },
        // animationDuration: 2000,
        // animationDurationUpdate: 2000,
        series: [{
            name: 'data',
            type: 'pictorialBar',
            label: {
                normal: {
                    show: true,
                    position: 'outside',
                    offset: [40, 0]
                }
            },
            symbol: pathSymbols.plane,
            symbolRepeat: true,
            symbolMargin: '40%',
            symbolSize: ['100%', '80%'],
            z: 10,
            data: [12, 60, 54, '-', 23, -16, 0, 25]
        }, {
            name: 'data2',
            type: 'pictorialBar',
            symbol: pathSymbols.plane,
            barGap: '20%',
            symbolRepeat: true,
            symbolMargin: '40%',
            symbolSize: ['100%', '80%'],
            z: 10,
            data: [33, 1, 41, -18, 23, -56, 0, 15]
        }, {
            name: 'original bar',
            type: 'bar',
            color: ['rgba(0,0,0,0.5)'],
            data: [12, 60, 54, '-', 23, -16, 0, 25]
        }, {
            name: 'original bg',
            type: 'bar',
            color: ['rgba(0,0,0,0.5)'],
            data: [60, 60, 60, '-', 60, -30, 60, 60]
        }]
    });
</script>


<script>
    makeChart('main1.1', {
        legend: {
            data: ['data'],
            selected: {
                'original bar': false,
                'original bg': false
            }
        },
        tooltip: {},
        yAxis: {
            data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
            axisTick: {show: false},
            axisLine: {show: false}
        },
        xAxis: {
            splitLine: {show: false},
            axisTick: {show: false},
            axisLabel: {show: false},
            axisLine: {show: false}
        },
        // animationDuration: 2000,
        // animationDurationUpdate: 2000,
        series: [{
            name: 'data',
            type: 'pictorialBar',
            symbol: pathSymbols.pentagram,
            symbolRepeat: 5,
            itemStyle: {
                normal: {
                    color: '#ddd'
                }
            },
            animation: false,
            silent: true,
            data: [12, 60, 54, 25, 23, 16, 1, 25],
            z: -1
        }, {
            name: 'data',
            type: 'pictorialBar',
            symbol: pathSymbols.pentagram,
            symbolRepeat: 5,
            symbolClip: true,
            z: 10,
            data: [12, 60, 54, 25, 23, 16, 1, 25]
        }]
    });
</script>


<script>

    makeChart('symbolSize', {
        color: ['#e54035'],
        xAxis: {
            splitLine: {show: false},
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false}
        },
        yAxis: {
            data: ['a', 'b', 'c'],
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false}
        },
        grid: {
            height: 80
        },
        series: [{
            name: 'glyph',
            type: 'pictorialBar',
            symbol: imageSymbols.spirit,
            symbolRepeat: 10,
            symbolSize: [20, 20],
            data: [100, 100, 100]
        }, {
            name: 'glyph',
            type: 'pictorialBar',
            symbol: 'rect',
            symbolSize: ['20%', 24],
            symbolPosition: 'center',
            itemStyle: {
                normal: {
                    color: '#e54035'
                }
            },
            label: {
                normal: {
                    show: true,
                    formatter: '16 亿',
                    textStyle: {
                        color: '#fff',
                        fontSize: 18,
                        fontFamily: 'Arial',
                        fontWeight: 'bold'
                    }
                }
            },
            data: ['-', 100, '-'],
            z: 100
        }]
    });
</script>


<script>
    makeChart('main2', {
        legend: {
            data: ['data', 'original bar', 'original bg'],
            selected: {
                'original bar': false,
                'original bg': false
            }
        },
        tooltip: {
            // trigger: 'axis',
            // axisPointer: {
            //     type: 'line'
            // }
        },
        xAxis: {
            data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
            axisTick: {show: false}
        },
        yAxis: {
            splitLine: {show: false}
        },
        series: [{
            name: 'data',
            type: 'pictorialBar',
            symbol: pathSymbols.pumpkin,
            symbolRotate: 30,
            itemStyle: {
                normal: {
                    color: '#ddd'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'outside',
                    textStyle: {
                        color: '#c23531',
                        fontSize: 20
                    }
                }
            },
            silent: true,
            symbolRepeat: 'fixed',
            animation: false,
            symbolBoundingData: 60,
            data: [12, 60, 54, '-', 23, 2, 0, 25]
        }, {
            name: 'data',
            type: 'pictorialBar',
            symbol: pathSymbols.pumpkin,
            symbolRotate: 30,
            symbolRepeat: true,
            symbolClip: true,
            symbolBoundingData: 60,
            z: 10,
            data: [12, 60, 54, '-', 23, -2, 0, 25]
        }, {
            name: 'original bar',
            type: 'bar',
            color: ['rgba(0,0,0,0.5)'],
            data: [12, 60, 54, '-', 23, -2, 0, 25]
        }, {
            name: 'original bg',
            type: 'bar',
            color: ['rgba(0,0,0,0.5)'],
            data: [60, 60, 60, '-', 60, 60, 60, 60]
        }]
    });
</script>


<script>
    makeChart('main3', {
        animation: false,
        legend: {
            data: ['data', 'bg', 'original bar', 'original bg'],
            selected: {
                'original bar': false,
                'original bg': false
            }
        },
        tooltip: {
            // trigger: 'axis',
            // axisPointer: {
            //     type: 'line'
            // }
        },
        xAxis: {
            data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
            axisTick: {show: false},
            position: 'top'
        },
        yAxis: {
            splitLine: {show: false}
        },
        series: [{
            name: 'bg',
            type: 'pictorialBar',
            symbol: pathSymbols.pumpkin,
            itemStyle: {
                normal: {
                    color: '#ddd'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'outside',
                    textStyle: {
                        color: '#c23531',
                        fontSize: 20
                    }
                }
            },
            silent: true,
            symbolRepeat: 'fixed',
            symbolClip: false,
            symbolBoundingData: 40,
            symbolRotate: 30,
            z: -1,
            data: [-12, -60, 34, '-', 23, -2, 0, -25]
        }, {
            name: 'bg',
            type: 'pictorialBar',
            symbol: pathSymbols.pumpkin,
            itemStyle: {
                normal: {
                    color: '#ddd'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'outside',
                    textStyle: {
                        color: '#c23531',
                        fontSize: 20
                    }
                }
            },
            silent: true,
            symbolRepeat: 'fixed',
            symbolClip: false,
            symbolBoundingData: -60,
            symbolRotate: 30,
            z: -1,
            data: [-12, -60, 34, '-', 23, -2, 0, -25]
        }, {
            name: 'data',
            type: 'pictorialBar',
            itemStyle: {
                emphasis: {
                    color: 'blue'
                }
            },
            symbol: pathSymbols.pumpkin,
            symbolRepeat: true,
            symbolClip: true,
            symbolRotate: 30,
            symbolBoundingData: [-60, 40],
            data: [-12, -60, 34, '-', 23, -2, 0, -25]
        }, {
            name: 'original bar',
            type: 'bar',
            color: ['rgba(0,0,0,0.5)'],
            data: [-12, -60, 34, '-', 23, -2, 0, -25]
        }, {
            name: 'original bg',
            type: 'bar',
            color: ['rgba(0,0,0,0.5)'],
            data: [-60, -60, 40, '-', 40, -60, -60, -60]
        }]
    });
</script>


<script>

    makeChart('main4', {
        color: ['#bb0004', 'orange'],
        xAxis: {
            data: [],
            axisTick: {show: false},
            axisLabel: {show: false}
        },
        yAxis: {
            splitLine: {show: false},
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false}
        },
        grid: {
            bottom: 100
        },
        animationEasing: 'elasticOut',
        series: [{
            name: 'all',
            type: 'pictorialBar',
            barCategoryGap: '40%',
            label: {
                normal: {
                    show: true,
                    position: 'outside'
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0,0,0,0.5)',
                    borderWidth: 6
                }
            },
            symbol: 'circle',
            data: [{
                value: 29000,
                symbolBoundingData: 29000,
                symbolRepeat: true,
                label: {normal: {formatter: 'start'}}
            }, {
                value: 29000,
                symbolBoundingData: 29000,
                symbolRepeat: true,
                symbolSize: ['80%', '20%'],
                label: {normal: {formatter: 'start'}}
            }, {
                value: 29000,
                symbolBoundingData: 29000,
                symbolRepeat: true,
                symbolMargin: 10,
                label: {normal: {formatter: 'start'}}
            }, {
                value: 29000,
                symbolBoundingData: 29000,
                symbolRepeat: true,
                symbolMargin: 30,
                symbolSize: ['100%', 160],
                label: {normal: {formatter: 'start'}}
            }, {
                value: 29000,
                symbolBoundingData: 29000,
                symbolRepeat: true,
                symbolMargin: 30,
                symbolSize: ['100%', 160],
                symbolPosition: 'center',
                label: {normal: {formatter: 'center'}}
            }, {
                value: 29000,
                symbolBoundingData: 29000,
                symbolRepeat: true,
                symbolMargin: 30,
                symbolSize: ['100%', 160],
                symbolPosition: 'end',
                label: {normal: {formatter: 'end'}}
            }, {
                value: 29000,
                symbolBoundingData: 29000,
                symbolRepeat: true,
                symbolSize: ['80%', '120%'],
                symbolMargin: '-30%',
                label: {normal: {formatter: 'start'}}
            }, {
                value: 29000,
                symbolBoundingData: 29000,
                symbolRepeat: true,
                symbolSize: ['80%', '120%'],
                symbolMargin: '-30%',
                symbolPosition: 'center',
                label: {normal: {formatter: 'center'}}
            }, {
                value: 29000,
                symbolBoundingData: 29000,
                symbolRepeat: true,
                symbolRotate: 80,
                symbolSize: ['80%', '120%'],
                symbolMargin: '-30%',
                symbolPosition: 'end',
                label: {normal: {formatter: 'end'}}
            }, {
                value: 19000,
                symbolPosition: 'start',
                label: {normal: {formatter: 'start'}}
            }, {
                value: 19000,
                symbolSize: ['60%', '20%'],
                symbolPosition: 'start',
                label: {normal: {formatter: 'start'}}
            }, {
                value: 19000,
                symbolSize: ['60%', '20%'],
                symbolPosition: 'center',
                label: {normal: {formatter: 'center'}}
            }, {
                value: 19000,
                symbolSize: ['60%', '20%'],
                symbolPosition: 'end',
                label: {normal: {formatter: 'end'}}
            }, {
                value: 19000,
                symbolSize: ['60%', '150%'],
                symbolPosition: 'start',
                label: {normal: {formatter: 'start'}}
            }, {
                value: 19000,
                symbolSize: ['60%', '150%'],
                symbolPosition: 'center',
                label: {normal: {formatter: 'center'}}
            }, {
                value: 19000,
                symbolSize: ['60%', '150%'],
                symbolPosition: 'end',
                label: {normal: {formatter: 'end'}}
            }, {
                value: 190,
                symbolPosition: 'end',
                label: {normal: {formatter: 'min'}}
            }],
            z: 10
        }, {
            name: 'shadow2',
            type: 'bar',
            data: [29000, 29000, 29000, 29000, 29000, 29000, 29000, 29000, 29000, 19000, 19000, 19000, 19000, 19000, 19000, 19000, 19]
        }]
    });
</script>


<script>

    var startData = 13000;
    var maxData = 18000;
    var minData = 5000;

    makeChart('dynamic-data', {
        backgroundColor: '#0f375f',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
                label: {show: true}
            }
        },
        legend: {
            data: ['all'],
            textStyle: {color: '#ddd'}
        },
        grid: {
            bottom: 100
        },
        xAxis: [{
            data: [
                'standard',
                'fix symbol margin\n(not accurate)\n(but more comparable)',
                'use symbolBoundingData\nauto repeat times\n(accurate)\n(but symbolMargin not fixed)',
                'use symbolBoundingData\nfix repeat times\n(accurate)\n(but less responsive)'
            ],
            axisTick: {show: false},
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                margin: 20,
                interval: 0,
                textStyle: {
                    color: '#ddd',
                    fontSize: 14
                }
            }
        }],
        yAxis: {
            splitLine: {show: false},
            axisTick: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#ddd'
                }
            }
        },
        animationEasing: 'cubicOut',
        animationDuration: 100,
        animationDurationUpdate: 2000,
        series: [{
            type: 'pictorialBar',
            name: 'all',
            id: 'paper',
            hoverAnimation: true,
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c} km',
                    textStyle: {
                        fontSize: 16,
                        color: '#e54035'
                    }
                }
            },
            symbol: imageSymbols.paper,
            symbolSize: ['70%', 50],
            symbolMargin: '-25%',
            data: [{
                value: maxData,
                symbolRepeat: true
            }, {
                value: startData,
                symbolRepeat: true
            }, {
                value: startData,
                symbolBoundingData: startData,
                symbolRepeat: true
            }, {
                value: startData,
                symbolBoundingData: startData,
                symbolRepeat: 20
            }],
            markLine: {
                symbol: ['none', 'none'],
                label: {
                    normal: {show: false}
                },
                lineStyle: {
                    normal: {
                        color: '#e54035'
                    }
                },
                data: [{
                    yAxis: startData
                }]
            }
        }, {
            name: 'all',
            type: 'pictorialBar',
            symbol: 'circle',
            itemStyle: {
                normal: {
                    color: '#185491'
                }
            },
            silent: true,
            symbolSize: ['150%', 50],
            symbolOffset: [0, 20],
            z: -10,
            data: [1, 1, 1, 1]
        }]
    }, function (echarts, chart) {

        setInterval(function () {
            var dynamicData = Math.round(Math.random() * (maxData - minData) + minData);

            chart.setOption({
                series: [{
                    id: 'paper',
                    data: [{
                        value: maxData,
                        symbolRepeat: true
                    }, {
                        value: dynamicData,
                        symbolRepeat: true
                    }, {
                        value: dynamicData,
                        symbolBoundingData: dynamicData,
                        symbolRepeat: true
                    }, {
                        value: dynamicData,
                        symbolBoundingData: dynamicData,
                        symbolRepeat: 20
                    }],
                    markLine: {
                        data: [{
                            yAxis: dynamicData
                        }]
                    }
                }]
            });
        }, 3000);
    });
</script>


</body>
</html>
